<template>
    <div>
        <!-- table主体 -->
        <el-table :data="tableData" style="width: 100%">
            <template v-for="(column, index) in columns" :key="index">
                <el-table-column :prop="column.prop" :label="column.label" :width="column.width || ''"></el-table-column>
            </template>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize"
            :total="totalRows" layout="prev, pager, next, jumper, ->, total" />


        <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize"
            :total="totalRows" layout="prev, pager, next, jumper, ->, total" />
    </div>
</template>
  
<script setup>
import { ref, computed, onMounted } from 'vue';
//   import axios from 'axios';
import { getFarmer } from '../../../api'
const currentPage = ref(1);
const pageSize = ref(10);
let totalRows;

const tableData = ref([]);
const columns = ref([]);

onMounted(async () => {
    try {
        const response = await getFarmer();
        console.log(response);
        var resdata = response.data
        totalRows = 800; // 获取总记录数
        //   return
        //  tableData.value = Object.freeze(resdata);
        tableData.value = resdata;
        // 动态生成表格列
        columns.value = Object.keys(resdata[0]).map((key) => ({
            prop: key,
            label: key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
            width: key === 'id' ? '180' : '',
        }));
    } catch (error) {
        console.error('Failed to fetch data:', error);
    }
});
// 分页事件处理函数
// const handlePageChange = async (newPage) => {
//   currentPage.value = newPage;
//   const response = await getFarmer({ page: newPage, size: pageSize.value });
//   tableData.value = response.data.data;
// };

// 分页事件处理函数
const handlePageChange = async (newPage) => {
    currentPage.value = newPage;
};

// 计算分页后的表格数据源
const pagedTableData = computed(() => {
    return tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
});
</script>